<template>
  <div class="box">
    <van-tabs
      v-model="active"
      sticky
      line-width="15vw"
      title-active-color="dodgerblue"
      color="dodgerblue"
      swipeable
    >
      <div
        class="metting_title"
        @click="showLists"
      >
        <van-icon name="calender-o" />第{{title}}快乐会议-{{date}}
      </div>
      <van-popup
        v-model="show"
        :safe-area-inset-bottom="true"
        :style="{ width:'66%',fontSize:'14px',borderRadius:'10px',height:'88vh'}"
        :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
      >
        <van-radio-group v-model="radio">
          <van-cell-group :style="{textAlign:'left'}">
            <van-cell
              :title="'第'+it.number+'快乐会议-'+it.create_date"
              clickable
              @click="showStatus(it.id ,it.number,it.create_date)"
              v-for="(it,y) in status"
              :key="y"
            >
              <van-radio
                slot="icon"
                :name="it.id"
                :style="{marginRight:'4vw'}"
              />
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </van-popup>
      <van-tab
        v-for="(item,index) in list"
        :title="item.award_type"
        :key="index"
      >
        <div v-if="active==index-1">
          <van-row
            class="content_left"
            v-for="(item1,i) in item.data"
            :key="'info'+i"
          >
            <van-col
              span="12"
              style="text-align:left; text-align: left;display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
            > 
            <img src="@/static/img/rank_jin.png">
            <span>{{item1.award_name}}</span> </van-col>
            <van-col span="12">{{item1.user_name}}<span style="color:silver">({{item1.department}})</span></van-col>

          </van-row>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script type="text/javascript">
import {
  Tab,
  Tabs,
  Col,
  Row,
  Icon,
  Popup,
  RadioGroup,
  Radio,
  Cell,
  CellGroup
} from "vant";
export default {
  data() {
    return {
      radio: 1,
      active: 0,
      list: [],
      title: "",
      date: "",
      show: false,
      status: []
    };
  },
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Col.name]: Col,
    [Row.name]: Row,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup
  },
  created() {
    const id = this.$route.query.id;
    this.getHappyInfo(id);
    this.title = this.$route.query.name;
    this.date = this.$route.query.date;
    dd.biz.navigation.setTitle({
      title: "快乐会议详情" //控制标题文本，空字符串表示显示默认文本
    });
  },
  methods: {
    // 筛选条件
    showStatus(id, number, date) {
      this.getHappyInfo(id);
      this.title = number;
      this.date = date;
      this.show = false;
    },
    // 弹框列表
    async showLists() {
      this.show = true;
       let userId = localStorage.getItem("userId");
         let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        `yuepoints/happyList?corpId=${corpId}&userId=${userId}`
      );
      this.status = res.data.data;

      for (let i = 0; i < res.data.data.length; i++) {
        if (this.title == res.data.data[i].number) {
          this.radio = res.data.data[i].id;
        }
      }
    },
    async getHappyInfo(id) {
        let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        `yuepoints/happyInfo?corpId=${corpId}&id=${id}`
      );
      this.list = res.data.data;
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  font-size: 15px;
  background: #fff;
  margin-bottom: 55px;
  text-align: left;
  /deep/ .van-icon-calender-o {
    font-size: 22px;
    vertical-align: middle;
  }
  .content_left {
    padding: 5px 0px 5px 15px;
    border-top: 1px solid #ebedf0;
    font-size: 16px;
    // background: #fff;
    img {
      vertical-align: middle;
      margin-right: 20px;
      height: 20px;
    }
  }
  .metting_title {
    font-size: 16px;
    margin: 10px;
    font-weight: 700;
    // text-align: left;
    color: #f5883ba6;
  }
}
</style>
